<template>
    <el-card class="box-card">
       <template #header>
        <div class="card-header">
            <span>课程列表</span>
        </div>
        </template>
        <div class="card-content">
            <el-table :data="Table" style="width: 100%">
                <el-table-column
                v-for="{ prop, label } in xunhuan"
                :key="prop"
                :prop="prop"
                :label="label">
                    <template  v-if="prop == 'kejian'" #default="scope">
                         <el-switch v-model="scope.row.Kejian" @change="getSwitch(scope.row)"/>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作">
                    <template #default="scope">
                         <div>
                            <el-button @click="goBianji(scope.row.name)"><el-icon><EditPen /></el-icon></el-button>
                            <el-button @click="goZhiyuangl(scope.row.name)"><el-icon><Files /></el-icon></el-button>
                            <el-button @click="goZhiyuanbp(scope.row.name)"><el-icon><Monitor /></el-icon></el-button>
                            <el-button @click="goKaike(scope.row.name)"><el-icon><School /></el-icon></el-button>
                         </div>
                    </template>
                </el-table-column>
            </el-table>
            <span class="span" v-show="showMessage.type && showMessage.course">正在{{ showMessage.type + showMessage.course }}</span>
        </div>
    </el-card>
</template>
<script>

import {EditPen,Files,Monitor,School} from "@element-plus/icons-vue"

export default {
    name:'Kclb',
    data(){
        return{
           Table:[
                {
                    id:1,
                    name:"Java程序设计",
                    time:'2020-12-12',
                    kejian:true
                },
              {
                    id:2,
                    name:"MySQL数据库技术",
                    time:'2021-12-11',
                    kejian:true
                },
                {
                    id:3,
                    name:"Web前端开发基础",
                    time:'2021-12-11',
                    kejian:true
                },
                {
                    id:4,
                    name:"Web前端项目实战",
                    time:'2021-12-11',
                    kejian:true
                }
            ],
             xunhuan: [
                { prop: 'id', label: '序号' },
                { prop: 'name', label: '课程名称' },
                { prop: 'time', label: '创建时间' },
                { prop: 'kejian', label: '可见状态' }
            ],
            showMessage: {
                type: '',
                course: ''
            }
        }
    },
    components:{
        EditPen,
        Files,
        Monitor,
        School
    },
    methods: {
        goBianji(name) {
            Object.assign(this.showMessage, {
                type: '编辑',
                course: name
            });
        },
        goZhiyuangl(name) {
            Object.assign(this.showMessage, {
                type: '资源管理',
                course: name
            });
        },
        goZhiyuanbp(name) {
            Object.assign(this.showMessage, {
                type: '资源编排',
                course: name
            });
        },
        goKaike(name) {
            Object.assign(this.showMessage, {
                type: '开课',
                course: name
            });
        },
        getSwitch(open){
            if(open.Kejian){
                this.$message({
                    message: open.name + '课程现在是可见的',
                    type: 'success'
                })
            } else{
                this.$message({
                    message: open.name + '课程现在是不可见的',
                    type: 'warning'
                })
            }
        }
    }
}
</script>
<style>
.card-header{
    text-align: left;
}
.span{
    text-align: center;
    line-height: 50px;
}
</style>